<template>
  <n-modal v-model:show="modalVisible" preset="card" title="确认同意?" class="w-300px">
    <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
      <n-grid :cols="24" :x-gap="18">
        <n-form-item-grid-item :span="12" label="打款证明" path="transfer_records">
          <n-upload :action="`${url}/admin/Tools/upload`" :headers="uploadHeaderDate" :data="uploadDate"
						list-type="image-card" :max="1" @finish="onFinish1" @remove="onRemove1">
						<img v-if="formModel.business_license_pic" :src="formModel.business_license_pic" style="width: 100%">
					</n-upload>
        </n-form-item-grid-item>
      </n-grid>
      <n-space class="w-full pt-16px" :size="24" justify="end">
        <n-button class="w-72px" @click="closeModal">取消</n-button>
        <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
      </n-space>
    </n-form>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';
import type { FormInst, FormItemRule } from 'naive-ui';
import { examineWithdrawal } from '@/service';
import { formRules, createRequiredFormRule,localStg } from '@/utils';
import { getServiceEnvConfig } from '~/.env-config';


export interface Props {
  /** 弹窗可见性 */
  visible: boolean;
  /** 记录Id */
  jiluId: any;
}

defineOptions({ name: 'TableActionModal' });

const props = defineProps<Props>();

interface Emits {
  (e: 'update:visible', visible: boolean): void;
  (e: 'refresh'): void;
}

const emit = defineEmits<Emits>();


const { url } = getServiceEnvConfig(import.meta.env);
// 上传图片...
const uploadHeaderDate: any = { //header
	token: localStg.get('token')
}
const uploadDate = { // params
	group: 'user'
}
// 上传成功的回调
function onFinish1(file: any) {
	// console.log(JSON.parse(file.event.target.response).data.pic_full_url);
	formModel.transfer_records = JSON.parse(file.event.target.response).data.pic_full_url
}
// 移除上传的回调
function onRemove1() {
	formModel.transfer_records = ""
}

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible) {
    emit('update:visible', visible);
  }
});
const closeModal = () => {
  modalVisible.value = false;
};


const formRef = ref<HTMLElement & FormInst>();

type FormModel = any;
const formModel = reactive<FormModel>(createDefaultFormModel());

const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
  transfer_records: createRequiredFormRule('请上传打款证明')
};

// 重置表单内容
function createDefaultFormModel(): FormModel {
  return {
    transfer_records: ''
  };
}
// 更新表单内容
function handleUpdateFormModel(model: Partial<FormModel>) {
  Object.assign(formModel, model);
}
// 更新表单
function handleUpdateFormModelByModalType() {
    const defaultFormModel = createDefaultFormModel();
    handleUpdateFormModel(defaultFormModel);
}
// 提交表单
async function handleSubmit() {
  const err = await formRef.value?.validate();
  if (!err) {
    const params = {
      id: props.jiluId,
      status: 2,
      transfer_records: formModel.transfer_records
    }
    await examineWithdrawal(params)
    closeModal();
    emit('refresh')
  }
}

watch(
  () => props.visible,
  newValue => {
    if (newValue) {
      handleUpdateFormModelByModalType();
    }
  }
);
</script>

<style scoped></style>
